<template>
  <div>
      <div class="Defary1">
            <div class="Df-top wp bot">
                <div>订单编号{{data}}</div>
                <div>待支付</div>
            </div>
            <div class="Df-center wp bot">
                <div class="Dfc">
                    <div class="dfCheck">
                        <span :class="{'dfc-yes':!bol}"></span>
                    </div>
                    <div>
                      <img src="../../../assets/user/g-san.png" alt="图片">
                    </div>
                </div>
                <div class="Dfc-cont">
                    <div>会呼吸丝滑蜜粉</div>
                    <div>规格：蜜粉</div>
                    <div class="Dfc-cont1">
                        <span>￥166.06</span>
                        <span>X1件</span>
                    </div>
                </div>

            </div>
            <div class="Df-bottom wp bot">
                <div>共计1件商品  合计：￥166.06(含运费：￥1.00)</div>
                <div class="btn2">
                    <p class="df-btn1">催单</p>
                    <p class="df-btn2">取消订单</p>
                    <p class="df-timer1">{{dtimer}}</p>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
name:'Gou',
    data(){
        return {
            bol:false,
            bol1:false,
            data:'1485269676465',
            dtimer:'05:00:00'
        }
    },
}
</script>

<style scoped>
/* ========= */
.Defary1{
    width: 100%;
    height: 38.5rem;
    border-bottom: 0.1rem solid #cccccc;
    margin-bottom: 2rem;
    display: block;
}
.Defary1 .Df-top{
    height: 6rem;
    line-height: 6rem;
    padding: 0 2rem;
    background-color: #fff;
    display: flex;
}
.Df-top div{
    flex: 1;
}
.Df-top div:nth-child(1){
    font-size: 2.8rem;
    text-align: left;
    clear: #4c4c4c;
}
.Df-top div:nth-child(2){
    text-align: right;
    color: #e53e42;
    font-size: 2.4rem;
}
.Df-center{
    height: 20rem;
    background-color: #fff;
    display: flex;
}
.Dfc-cont{
    display: flex;
    flex-direction: column;
    text-align: left;
}
.Dfc-cont div:nth-child(1){
    color: #4c4c4c;
    font-size: 2.8rem;
    line-height: 4rem;
    padding: 2.2rem 0 1rem ;
}

.Dfc-cont div:nth-child(2){
    color: #666;
    font-size: 2.4rem;
    line-height: 3.6rem;
    padding-bottom: 3rem;
}
.Dfc-cont1 span {
    line-height: 4rem;
}
.Dfc-cont1 span:nth-child(1){
    color: #e53e42;
    font-size: 2.4rem;
    margin-right: 3rem;
}
.Dfc-cont1 span:nth-child(2){
    color: #808080;
    font-size: 2.8rem;
}

.Dfc{
    height: 20rem;
    width: 20rem;
    line-height: 20rem;
    /* background-color: #f0f; */
    overflow: hidden;
    display: flex;
}
/* .Dfc div:nth-child(1){
    width: 4rem;
    height: 20rem;
} */
/* .Dfc div:nth-child(1) span{
    display: inline-block;
    height: 3rem;
    width: 3rem;
    background: url(../../../assets/user/user-no.png) no-repeat 0 0;
}
.Dfc div:nth-child(1) span.dfc-yes{
    display: inline-block;
    height: 3rem;
    width: 3rem;
    background: url(../../../assets/user/user-yes.png) no-repeat 0 0;
} */
.Dfc div:nth-child(2){
    height: 15rem;
    line-height: 15rem;
    margin:2.5rem auto;
    width: 15rem;
    background-color: #fff;
}
.Dfc img{
    margin: 2.4rem;
}

.Df-bottom{
    height: 12.2rem;
    background-color: #fff;
}
.Df-bottom div:nth-child(1){
    font-size: 2.8rem;
    color: #4c4c4c;
    text-align: right;
    line-height: 6rem;
    height: 6rem;
}
.Df-bottom div.btn2{
  height: 6.3rem;
  width: 100%;
  /* background-color: #f0f; */
  position: relative;
}
.Df-bottom div:nth-child(2){
    text-align: right;
    display: flex;
    position: relative;
}
.Df-bottom .btn2 .df-timer1{
    font-size: 1.8rem;
    color: #e53e42; 
    position: absolute;
    right: 2.4rem;
    bottom: 0;
}
.Df-bottom .btn2 .df-btn1,.df-btn2{
    position: absolute;
    top: 0;
    background-color: #e53e42;
    color: #fff;
    font-size: 2.4rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    width: 12rem;
    border-radius: 4rem;
   
}
.Df-bottom .btn2 .df-btn1{
  right:13rem;
}
.Df-bottom .btn2 .df-btn2{
  right: 0;

}
/* margin */
.bot{
    border-bottom: 0.1rem solid #cccccc;
}
.wp{
    width: calc(100% - 4rem);
    padding: 0 2rem;
}
.wm{
    width: calc(100% - 4rem);
    margin: 0 2rem;
}
</style>